<template>
  <van-nav-bar title="匹配对手" />
  <div class="image">
    <van-image
      round
      width="100px"
      height="100px"
      :src="'data:image/png;base64,' + headImage"
    ></van-image>
  </div>
  <div class="text">
    <div ref="connect_button">
      <van-button @click="establishMatchingRelationship()">开始匹配</van-button>
    </div>
    <div ref="connect_text" style="display: none">
      <span> 已连接，等待匹配…… </span>
      <span> 预计3秒 </span>
    </div>
  </div>
</template>
  
  <script>
import router from "../../router";
export default {
  data() {
    return {
      establishMatchingRelationshipQueryInfo: {
        methodName: "battle_establishMatchingRelationship",
        data: { param: window.sessionStorage.getItem("account") },
      },
      imageQueryInfo: {
        methodName: "mineInfo_getHeadImage",
        data: "",
      },
      headImage: "",
      form: "",
    };
  },
  created() {
    this.getImageHead();
  },
  methods: {
    establishMatchingRelationship() {
      this.$refs.connect_button.style.display = "none";
      this.$refs.connect_text.style.display = "";
      const intervalId = setInterval(async () => {
        const { data: res } = await this.$http.post(
          "/app/main",
          JSON.stringify(this.establishMatchingRelationshipQueryInfo),
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
        // console.log("isMatch", JSON.parse(res.data).matchRelationship.isMatch);
        console.log(JSON.parse(res.data).matchRelationship.isMatch);
        this.form = res.data;
        window.sessionStorage.setItem("pkForm", this.form);
        // eventBus.emit("getform", this.form);

        if (JSON.parse(res.data).matchRelationship.isMatch) {
          clearInterval(intervalId);
          router.push("/waiting");
        }
      }, 1000);
    },
    async getImageHead() {
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.imageQueryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.headImage = JSON.parse(res.data).headImage;
    },
  },
};
</script>
  
  <style>
.image {
  background: url(../../assets/image/图片底部.png) no-repeat center;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 200px auto;
}
.text {
  font-size: 30px;
  display: flex;
  justify-content: center;
}
.van-button {
  background-color: rgb(234, 215, 198);
}
</style>